一、要解決什麼問題？

我們常面對大量、非結構化的資訊時，使用者經常在「整理」和「理解」上耗費大量精力，導致思維阻塞，學習與創作效率低下。筆記與思維導圖之間的割裂，更是讓知識難以系統化。

現有的筆記工具仍不少，但有一定的學習曲線，我在思考如何可以解決「從記錄到系統化理解之間的效率落差」，完全心無旁騖專注在思維上的輸出，透過極簡風格的 UI 設計和強大的 Google Gemini 核心，因而開發一個思維導讀筆記工具。

使用者只需專注於寫作，系統便能實時自動保存，並允許一鍵切換視覺化導圖。這不僅提升了寫作的流暢度，更讓複雜的資訊得以結構化呈現，從根本上增強了使用者的高效思維整理與知識吸收能力。

二、提示詞設計

情境（Context）：  
你是一位專精於 Google Gemini 的專業全端開發者，負責開發創新的應用程式。你需要設計一款新的筆記工具來提升用戶的思維整理能力。

任務（Task）：  
開發一個名為 "AI 思維導讀筆記工具" 的應用程式，目的是幫助用戶進行高效的筆記和思維導圖整理。

功能需求（Functionality Requirements）：  
1. 介面設計採用極簡風格，符合最優的用戶體驗，避免過多的視覺元素。  
2. 提供一個 markdown 編輯器功能，讓用戶能自由編輯筆記，並能夠隨時切換至思維導圖視圖。  
3. 筆記工具應支援實時保存用戶的編輯進度，以防止數據丟失。  
4. 用戶可以導入和導出筆記，以便於在不同設備間共享和存儲。  

開發指南（Development Guidelines）：  
- 在程式碼的每個步驟中，提供清晰且結構化的註解以增強可讀性。  
- 確保所開發的頁面具備良好的響應式設計，以適應各種屏幕尺寸和設備。  
- 優化頁面載入速度以提升用戶使用時的流暢體驗。  

限制（Constraints）：  
最終輸出必須是一個可實際運作並可部署的網頁，並需進行全面的測試以確保功能正常且無重大漏洞。  
需要在產品推出前進行用戶測試來獲取反饋並根據用戶需求進行迭代改進。

三、產品原型呈現

1. 筆記模式 (Markdown Editor View)

• Markdown 編輯器：
  • 核心功能是提供一個 Markdown 編輯環境，允許用戶使用 # 符號等標籤進行結構化寫作。
  • 即時預覽 / 導讀： 在左側導覽列中，內容的標題和結構（如 # 思維導讀筆記工具、## 核心功能）會自動生成層級目錄，幫助用戶快速掌握筆記的結構。
• 功能清單與說明：
  • 核心功能： 涵蓋 Markdown 編輯器、自動生成思維導圖、本地實時保存、導入/導出筆記。
  • 如何使用 (導讀)： 提供清晰的步驟指引，特別強調了使用 Markdown 的標題語法 (#, ##) 是生成思維導圖的關鍵。
• 數據管理：
  • 支援本地實時保存功能，確保筆記內容的安全性。
  • 支援導入和導出筆記，方便在不同平台間分享或備份。
• 快速操作按鈕：
  • 右上角有清晰的圖標，用於切換視圖（筆記/思維導圖）、保存、導入和導出，操作直覺。

2. 思維導圖模式 (Mind Map View)

• 自動生成與切換：
  • 一鍵切換： 用戶可以隨時從 Markdown 編輯器切換到思維導圖視圖。
  • 結構化視覺化： 系統會根據 Markdown 筆記中的標題層級（例如 # 是一級節點，## 是二級節點），自動生成結構化的思維導圖。
• 導圖內容：
  • 圖中的節點內容直接對應筆記中的主要標題，例如：**「思維導讀筆記工具」**是主節點，延伸出 「核心功能」 和 「如何使用」，再進一步延伸出具體的功能項。
• 互動性與可操作性：
  • 介面是互動式的，右下角提供縮放 (Zoom) 按鈕，方便用戶調整視野。
  • 這種視覺化呈現，極大地幫助用戶理清思路、建立知識體系，並快速掌握筆記的核心結構。

這款工具的價值在於無縫地橋接了文字的精確記錄與視覺化的結構整理，讓用戶能夠在寫作的同時，自動完成思維的系統化。